<template>
  <view class="start-index">
    <view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Home ref="home"></Home>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Moment ref="moment"></Moment>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Work ref="work"></Work>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top :scroll-top="pageScrollTop[3]" @scroll="tabbarPageScroll" @scrolltolower="tabbarPageScrollLower">
        <Partner ref="partner" @key-select="contactsKeysSelectEvent"></Partner>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Mine ref="mine"></Mine>
      </scroll-view>
    </view>
    
    <tn-tabbar
      v-model="currentIndex"
      :list="tabbarList"
      activeColor="#3668FC"
      inactiveColor="#C5CAD5"
      activeIconColor="#3668FC"
      inactiveIconColor="#C5CAD5"
      :animation="true"
      :safeAreaInsetBottom="true"
      @change="switchTabbar"
    ></tn-tabbar>
  </view>
</template>

<script>
  import Home from './home/home.vue'
  import Moment from './moment/moment.vue'
  import Work from './work/work.vue'
  import Partner from './partner/partner.vue'
  import Mine from './mine/mine.vue'
  
  export default {
    components: {
      Home,
      Moment,
      Work,
      Partner,
      Mine
    },
    data() {
      return {
        // 底部tabbar菜单数据
        tabbarList: [
          {
            title: '首页',
            // activeIcon: '/static/tabbar/tn-tabbar0-curnew.png',
            // inactiveIcon: '/static/tabbar/tn-tabbar0.png'
            activeIcon: 'company-fill',
            inactiveIcon: 'company-fill',
            // count: '15',
            iconSize: 50
          },
          {
            title: '时光',
            /* activeIcon: '/static/tabbar/tn-tabbar1-curnew.png',
            inactiveIcon: '/static/tabbar/tn-tabbar1.png' */
            activeIcon: 'discover-fill',
            inactiveIcon: 'discover-fill',
            count: '3',
            iconSize: 50
          },
          {
            title: '工作台',
            /* activeIcon: '/static/tabbar/tn-tabbar1-curnew.png',
            inactiveIcon: '/static/tabbar/tn-tabbar1.png' */
            activeIcon: 'menu-circle-fill',
            inactiveIcon: 'menu-circle-fill',
            iconSize: 50
          },
          // 这个是中间突起的tabbar，因为要商务，所以图鸟不用突起的tabbar，当然，如果你家boss喜欢，可以用，预留在这里了
          // {
          //   title: '工作台',
          //   activeIcon: 'menu-match-fill',
          //   inactiveIcon: 'rocket',
          //   activeIconColor: '#FFFFFF',
          //   inactiveIconColor: '#FFFFFF',
          //   iconSize: 50,
          //   out: true
          // },
          {
            title: '通讯录',
            /* activeIcon: '/static/tabbar/tn-tabbar2-curnew.png',
            inactiveIcon: '/static/tabbar/tn-tabbar2.png' */
            activeIcon: 'address-fill',
            inactiveIcon: 'address-fill',
            iconSize: 50
          },
          {
            title: '我的',
            /* activeIcon: '/static/tabbar/tn-tabbar3-curnew.png',
            inactiveIcon: '/static/tabbar/tn-tabbar3.png' */
            activeIcon: 'my-job-fill',
            inactiveIcon: 'my-job-fill',
            iconSize: 50
          }
        ],
        // tabbar当前被选中的序号
        currentIndex: 0,
        // 自定义底栏对应页面的加载情况
        tabberPageLoadFlag: [],
        
        // 保存每个子页面scrollTop的值
        pageScrollTop: [0, 0, 0, 0, 0]
        
      }
    },
    onLoad(options) {
      const index = Number(options.index || 0)
      // 根据底部tabbar菜单列表设置对应页面的加载情况
      this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
        return index === tabbar_index
      })
      this.switchTabbar(index)
    },
    methods: {
      // 切换导航
      switchTabbar(index) {
        this._switchTabbarPage(index)
      },
      
      
      // 瀑布流导航页面滚动到底部
      tabbarPageScrollLower(e) {
      },
      
      // 子页面滚动事件
      tabbarPageScroll(e) {
        const scrollTop = e.detail.scrollTop
        this.pageScrollTop[this.currentIndex] = scrollTop
        if (this.currentIndex === 3) {
          this.$refs?.partner?._updateScrollTopValue(scrollTop)
        }
      },
      
      // 通讯录点击索引事件
      contactsKeysSelectEvent(scrollTop) {
        // this.pageScrollTop[3] = scrollTop
        this.$set(this.pageScrollTop, 3, scrollTop - 125)
      },

      // 切换导航页面
      _switchTabbarPage(index) {
        wx.vibrateShort();
        const selectPageFlag = this.tabberPageLoadFlag[index]
        if (selectPageFlag === undefined) {
          return
        }
        if (selectPageFlag === false) {
          this.tabberPageLoadFlag[index] = true
        }
        this.currentIndex = index
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
